Ci sono due cose importanti che devi sapere: l'ordine di pittura e il contesto di sovrapposizione. Se fai riferimento alla specifica, puoi scoprire come e quando gli elementi vengono dipinti.
Contesti di impilamento formati da discendenti posizionati con indici z negativi (escluso 0) in ordine z-index (prima il più negativo) quindi ordine ad albero.
Tutti i discendenti posizionati, opacizzati o trasformati, in ordine ad albero che rientrano nelle seguenti categorie:
Tutti i discendenti posizionati con "z-index: auto" o "z-index: 0", in ordine ad albero.
Contesti di impilamento formati da discendenti posizionati con indici z maggiori o uguali a 1 in ordine z-index (prima il più piccolo) quindi ordine ad albero.
È chiaro da questo che prima dipingiamo gli elementi con z-index negativo al passaggio (3), poi quello con z-index uguale a 0 al passaggio (8) e infine quelli con z-index positivo al passaggio (9) , che è logico. Possiamo anche leggere in un'altra parte della specifica:
Ogni scatola appartiene a un contesto di impilamento. Ogni casella in un dato contesto di impilamento ha un livello di impilamento intero, che è la sua posizione sull'asse z rispetto ad altre caselle nello stesso contesto di impilamento. Le scatole con livelli di pila maggiori sono sempre formattate davanti alle scatole con livelli di pila inferiori. Le scatole possono avere livelli di pila negativi. Le caselle con lo stesso livello di pila in un contesto di impilamento vengono impilate dal basso verso l'alto in base all'ordine della struttura ad albero del documento.
Anche
Un elemento che stabilisce un contesto di stacking locale genera un box che ha due livelli di stack: uno per il contesto di stacking che crea (sempre 0) e uno per il contesto di stacking a cui appartiene (dato dalla proprietà z-index).
Per capire quando ogni elemento verrà dipinto è necessario conoscere il suo contesto di stacking e il suo livello di stack all'interno di questo contesto di stacking (definito da z-index). È inoltre necessario sapere se quell'elemento stabilisce un contesto di impilamento. Questa è la parte difficile, perché l'impostazione di z-index farà questo:
Per una casella posizionata, la proprietà z-index specifica:
Il livello di stack della scatola nel contesto di stacking corrente.
Se la scatola stabilisce un contesto di impilamento
I valori hanno i seguenti significati:

Questo numero intero è il livello di stack del box generato nel contesto di stacking corrente. La scatola stabilisce anche un nuovo contesto di impilamento.
auto
Il livello di stack della casella generata nel contesto di impilamento corrente è 0. La casella non stabilisce un nuovo contesto di impilamento a meno che non sia l'elemento radice.
Adesso abbiamo tutte le informazioni per capire meglio ogni caso. Se l'elemento genitore ha un valore z-index diverso da auto, allora creerà un contesto di impilamento, quindi l'elemento figlio sarà dipinto all'interno qualunque sia il loro z-index (negativo o positivo). Lo z-index dell'elemento figlio ci dirà semplicemente l'ordine di pittura all'interno dell'elemento genitore (questo copre il secondo punto).
Ora, se solo l'elemento figlio ha uno z-index positivo e non impostiamo nulla sull'elemento genitore, quindi considerando l'ordine di pittura, il bambino verrà dipinto in seguito (nel passaggio (9)) e il genitore nel passaggio (8). L'unico modo logico per dipingere il genitore sopra è aumentare lo z-index, ma così facendo cadremo nel caso precedente in cui il genitore stabilirà un contesto di impilamento e l'elemento figlio apparterrà ad esso.
Non c'è modo di avere il genitore sopra un elemento figlio quando si imposta uno z-index positivo per il figlio. Inoltre non c'è modo di avere il genitore sopra il figlio se impostiamo uno z-index per l'elemento genitore diverso da auto (positivo o negativo) .1
L'unico caso in cui possiamo avere un figlio sotto il suo genitore è impostare uno z-index negativo sull'elemento figlio e mantenere il genitore su z-index: auto, quindi questo non creerà un contesto di impilamento e seguendo l'ordine di pittura il il bambino verrà dipinto per primo.
Oltre a z-index, ci sono altre proprietà che creano un contesto di stacking. Nel caso in cui ti trovi di fronte a un ordine di impilamento previsto, devi considerare anche quelle proprietà, al fine di vedere se è stato creato un contesto di impilamento.
Alcuni fatti importanti che possiamo concludere da quanto sopra:
I contesti di impilamento possono essere contenuti in altri contesti di impilamento e insieme creano una gerarchia di contesti di impilamento.
Ogni contesto di impilamento è completamente indipendente dai suoi fratelli: vengono considerati solo gli elementi discendenti quando viene elaborato lo stack.
Ogni contesto di impilamento è autonomo: dopo che i contenuti dell'elemento sono stati impilati, l'intero elemento viene considerato nell'ordine di impilamento del contesto di impilamento padre. rif
1: ci sono alcuni modi complicati se consideriamo l'uso della trasformazione 3D.
Esempio con un elemento che va sotto il suo elemento genitore anche se questo ha uno z-index specificato.
.scatola {
posizione: relativa;
z-index: 0;
altezza: 80px;
sfondo: blu;
stile di trasformazione: preserva-3d; /* Questo è importante */
}
.box> div {
margine: 0 50px;
altezza: 100px;
sfondo: rosso;
z-index: -1; / * questo non farà nulla * /
trasformare: translateZ (-1px); / * questo farà la magia* /
}

 

Un altro esempio in cui possiamo posizionare un elemento tra due elementi in un altro contesto di impilamento:
.scatola {
posizione: relativa;
z-index: 0;
altezza: 80px;
sfondo: blu;
}
.box> div {
margine: 0 50px;
altezza: 100px;
sfondo: rosso;
z-index: 5;
trasformare: translateZ (2px);
}
.al di fuori {
altezza: 50px;
sfondo: verde;
margine: -10px 40px;
trasformare: translateZ (1px);
}
body {
stile di trasformazione: preserva-3d;
}

 

 
Possiamo anche avere un ordine di impilamento pazzo come di seguito:
.scatola {
larghezza: 100px;
altezza: 100px;
posizione: assoluta;
}
body {
stile di trasformazione: preserva-3d;
}
 
 
 
 
Dobbiamo notare che l'uso di tale hack può avere qualche effetto collaterale dovuto al fatto che lo stile di trasformazione, la prospettiva e la trasformazione influenzeranno la posizione: elemento assoluto / fisso. Correlati: il filtro CSS sul genitore interrompe il posizionamento del figlio
10
|
Un buon modo per pensarci è che ogni genitore contiene il proprio contesto di impilamento. Gli elementi di pari livello condividono l'ordine di sovrapposizione di un genitore e possono quindi sovrapporsi.
Un elemento figlio ottiene SEMPRE un contesto di impilamento basato sul suo genitore. Da qui la necessità di un valore z-index negativo per spingere il figlio "dietro" il contesto di impilamento genitore (0).
L'unico modo per rimuovere un elemento dal contesto del suo genitore è usare position: fixed poiché questo essenzialmente lo costringe a usare la finestra per il contesto.
1
|
La documentazione di Mozilla dice
La proprietà CSS z-index imposta l'ordine z di un elemento posizionato e dei suoi discendenti o elementi flessibili.
Ecco una logica aggiuntiva da un altro articolo StackOverflow relativo a bambini e discendenti.
2
|
Come posso capire questo comportamento in base alla logica?
Per me è difficile capire il tuo problema con la logica. Un genitore contiene i suoi figli. Una ciotola può essere coperta da un'altra ciotola. Ma non puoi coprire la zuppa con la ciotola a meno che non metti la zuppa fuori dalla ciotola.
z-Index imposta l'ordine per gli elementi sovrapposti. Un genitore non può sovrapporsi a suo figlio.
ImhO è perfettamente logico.
|
La tua risposta
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("snippets", function () {
StackExchange.snippets.init ();
});
});
}, "frammenti di codice");
StackExchange.ready (function () {
var channelOptions = {
tag: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Devo attivare l'editor dopo gli snippet, se gli snippet sono abilitati
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("snippets", function () {
createEditor ();
});
}
altro {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
suffisso: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.62993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.62481 46.72543 4.9162889 464562 46.72543 4.9162889 4.645.6562 4.6531 4.695.69562 4.6531 4.65.69562 4.65.695.65.695.65.695.65.69562 C.495.65. 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.418 14.695.0 37439 C32.418 14.695.0 14.6954C32.418 14.695.0 14.6954 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C45.820 35 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "d = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.6.7331C28.9913 4.6624978 4.533 4.56087 4.560.856087 4.6624978 4.560.856087 4.533.456087 4.560.87.533.4556087 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.779928,121 12.8346C28.1256 12,8854 28,1301 12,9342 28,1301 12.983C28.1301 14,4373 27,2502 15,2321 25,777 15.2321C24.8349 15,2321 24,1352 14,9821 23,5661 14.7787C23.176 14,6393 22,8472 14,5218 22,5437 14.5218C21.7977 14,5218 21,2429 15,0123 21,2429 15.6887C21.2429 16,7375 22,9072 17,6335 25,6622 17,6335 ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.27932Zc 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609.63.633 4.89.55815 4.666 4.633 4.628 4.628 4.65.85.58 4.65.633 4.628 4.628 4.65.85.55.85.633 4.65. 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.8962C139.43.779 12.4044 13.8962C138.43.726 7.511.9 13.8962C139.43.526 7.511.913.913.89.37.375. 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354.558 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.9888V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.9888.87 3.5726767 1.347267 2.56.97267 1.347267 2.5667 1.347267 2.5667 2.7267 1.3477267 3.500 3.72677267 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Contributi utente concessi in licenza con \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (content policy) \ u003c / a \ u003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
, immediatamenteShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Grazie per aver contribuito con una risposta a Stack Overflow!
Assicurati di rispondere alla domanda. Fornisci dettagli e condividi la tua ricerca!
Ma evita ...
Chiedere aiuto, chiarimenti o rispondere ad altre risposte.
Fare dichiarazioni basate sull'opinione; supportarli con riferimenti o esperienza personale.
Per saperne di più, consulta i nostri suggerimenti su come scrivere ottime risposte.
Bozza salvata
Bozza scartata
Registrati o fai il login
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Registrati utilizzando Google
Iscriviti utilizzando Facebook
Iscriviti utilizzando e-mail e password
Invia
Pubblica come ospite
Nome
E-mail
Obbligatorio, ma mai mostrato
StackExchange.ready (
funzione () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f54897916% 2fwhy-cant-an-element-with-az-index-value-cover-its- figlio% 23new-answer ',' question_page ');
}
);
Pubblica come ospite
Nome
E-mail
Obbligatorio, ma mai mostrato
Pubblica la tua risposta
Scartare
Facendo clic su "Pubblica la tua risposta", accetti i nostri termini di servizio, politica sulla privacy e politica sui cookie
Non è la risposta che stai cercando? Sfoglia altre domande etichettate css css-position z-index o fai la tua domanda.